<template>
  <keep-alive :include="cachedViews">
    <!-- <div :is="currentView"></div> -->
    <div>
      <div class="app-container clearfix pageHeader">
        <div class="header fl">{{$route.meta.title}}</div>
      </div>
      <div class="app-container margin-content padding-content">
        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-form-item label="公司名称">
            <el-autocomplete class="inline-input" v-model="form.company" :fetch-suggestions="queryCompany" placeholder="请输入公司名称" :trigger-on-focus="false" @select="handleSelectCompany"></el-autocomplete>
          </el-form-item>
          <el-form-item label="申报口岸">
            <el-input  v-model="form.port" placeholder="请输入申报口岸">
            </el-input>
          </el-form-item>
          <el-form-item label="进出口">
            <el-select v-model="form.inOut" placeholder="请选择进出口">
              <el-option v-for="item in optionsIO" :key="item.id" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="报文时间">
            <el-date-picker v-model="form.daterange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="doSearch">查询</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="app-container margin-content padding-content">
        <el-table :height="scrollHeight" :key="tableKey" :data="list" v-loading="listLoading" element-loading-text="正在加载..." style="width: 100%">
          <!-- <el-table-column type="selection" width="55"></el-table-column> -->
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column label="申报日期" property="decltime" width="100"></el-table-column>
          <el-table-column label="进/出口" property="ieflag"></el-table-column>
          <el-table-column label="申报口岸" property="applyseaport"></el-table-column>
          <el-table-column label="申报企业" property="declentname" width="200"></el-table-column>
          <el-table-column label="申报数量" property="qty"></el-table-column>
          <!-- <el-table-column label="件数" property="packno"></el-table-column> -->
          <!-- <el-table-column label="毛重" property="grosswt"></el-table-column> -->
          <el-table-column label="公共平台回执（条）" property="publicReceipt" width="150"></el-table-column>
          <el-table-column label="海关回执（条）" property="cusReceipt" width="150"></el-table-column>
        </el-table>
        <div class="pagination-container align-right">
          <el-pagination background :current-page="page.pageNum" v-if="isShow" :page-size="page.pageSize" :total="total" @current-change="handleCurrentChange" layout="total,prev, pager, next, jumper">
          </el-pagination>
        </div>
      </div>
  
  
    </div>
  </keep-alive>
</template>

<script>
  import {
    querySearchList,
    getApproachList
  } from '@/api/croBsn'
  export default {
    name: 'approachMsg',
    data() {
      return {
        scrollHeight: null,
        form: {
          company: '',
          daterange: '',
          port: '',
          inOut: '',
        },
        optionsIO: [{
          id: 'I',
          name: '进口'
        }, {
          id: 'E',
          name: '出口'
        }],
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        page: {
          pageNum: 1,
          pageSize: 20
        },
        total: 0,
        tableKey: 0,
        listLoading: false,
        list: [],
        isShow: false,
      }
    },
    computed: {
      // currentView(){
      //   return this.view[this.index]
      // },
      cachedViews() {
        return this.$store.state.tagsView.cachedViews
      }
    },
    methods: {
      tableResize() {
        const _height = 320
        this.scrollHeight = document.body.scrollHeight - _height
        window.onresize = () => {
          this.scrollHeight = document.body.scrollHeight - _height
        }
      },
      getList() {
        this.listLoading = true
        this.isShow = false
        let params = {
          ieflag: this.form.inOut,
          applyseaPort: this.form.port,
          companyName: this.form.company,
          messageBeginDate: this.form.daterange ? this.form.daterange[0] : '',
          messageEndDate: this.form.daterange ? this.form.daterange[1] : '',
          pageNum: this.page.pageNum,
          pageSize: this.page.pageSize
        }
  
        getApproachList(params).then((res) => {
          console.log(res.data)
          if (res.data.code === 200) {
            this.isShow = true
            //   res = res.data
            this.list = res.data.data.dataList !== '' ? res.data.data.dataList : []
            this.total = res.data.data.total !== '' ? res.data.data.total : 0
            this.listLoading = false
          }
  
        })
      },
      queryCompany(queryString, cb) {
        let params = {
          type: 'customscode',
          value: queryString
        }
        querySearchList(params).then((res) => {
          console.log(res)
          if (res.data.code === 200) {
            cb(res.data.data)
          }
        })
      },
      handleSelectCompany(item) {
        this.hsCode = item.value
        // this.getList()
      },
      // 页码查询
      handleCurrentChange(val) {
        this.page.pageNum = val
        this.getList()
      },
      doSearch() {
        this.page.pageNum = 1
        this.getList()
      },
      resetForm() {
        this.form = {
          company: '',
          daterange: '',
          port: '',
          inOut: '',
        }
      }
    },
    created() {
      this.tableResize()
      // this.getList()
    },
  }
</script>
